<template>
  <div>
    <div class="type">
      <div class="title">
        <div class="tit">热门电影</div>
        <div class="more">更多&gt;</div>
      </div>
      <ul class="list">
        <router-link
          tag="li"
          :to="'/detail/' + item.id"
          v-for="item of typeList"
          :key="item.id"
          class="border-bottom"
        >
          <img :src="getImages(item.images.small)" class="lazyimg" alt="加载未完成">
          <div class="desc">
            <div class="tt">
              <div class="tit">{{item.title}}</div>
              <div class="grade">{{item.rating.average}}分</div>
            </div>
            <div class="dd">
              主演：
              <span v-text="getActors(item.casts)"></span>
            </div>
            <div class="tp">类型：
              <span v-text="getGenres(item.genres)"></span>
            </div>
          </div>
        </router-link>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeList',
  props: {
    typeList: Array
  },
  methods: {
    getImages (_url) {
      if (_url !== undefined) {
        let _u = _url.substring(7)
        return 'https://images.weserv.nl/?url=' + _u
      }
    },
    getActors (e) {
      let x
      let arr = []
      for (x in e) {
        arr.push(e[x].name)
      }
      return arr.join(' / ')
    },
    getGenres (e) {
      let x
      let arr = []
      for (x in e) {
        arr.push(e[x])
      }
      return arr.join(' / ')
    }
  }
}
</script>

<style scoped lang="stylus">
  @import '~styles/varibles.styl'
  .type
    .title
      height: 1rem
      display: flex
      align-items: center
      flex-flow: row nowrap
      .tit
        position: relative
        padding-left: .4rem
        flex: 1
        font-size: .28rem
        color: #333
        &:after
          content: ' '
          position: absolute
          left: 0
          top: 50%
          width: .06rem
          height: .26rem
          margin-top: -.14rem
          background: $bgColor
      .more
        padding-right: .3rem
        font-size: .28rem
        color: $bgColor
    .list
      padding-left: .4rem
      padding-right: .14rem
      margin-top: -.15rem
      li
        margin-top: .15rem
        display: flex
        height: 2.2rem
        padding-bottom: .15rem
        felx-flow: row nowrap
        img
          height: 100%
          vertical-align: middle
          backgound: #808080
        .desc
          margin-left: .18rem
          flex: 1
          position: relative
          .tt
            display: flex
            flex-flow: row nowrap
            align-items: center
            height: .48rem
            .tit
              font-size: .32rem
              font-weight: bold
              color: #494949
              flex: 1
            .grade
              font-size: .28rem
              color: #494949
          .dd
            margin-top: .12rem
            height: .72rem
            line-height: .36rem
            font-size: .28rem
            color: #333333
            display: -webkit-box
            -webkit-box-orient: vertical
            -webkit-line-clamp: 2
            overflow: hidden
            span
              color: #37a
          .tp
            position: absolute
            left: 0
            bottom: 0
            font-size: .28rem
            color: #808080

</style>
